<template>
    <div id="init-viewer-wrapper">
        <div class="slider-container">
            <span class="demonstration">焦距</span>
            <el-slider v-model="focalDistance" :max="200" @input="updatePostProcessFocalDistance"></el-slider>
            <span class="demonstration">模糊度</span>
            <el-slider v-model="stepSize" :max="10" @input="updatePostProcessStepSize"></el-slider>
        </div>
    </div>
</template>
  
<script>
let depthOfField
export default {
    name: 'DepthOfField',
    components: {},
    data() {
        return {
            focalDistance: 10,
            stepSize:2.46
        }
    },
    mounted() {
        this.initViewer()
    },
    methods: {
        async initViewer() {
            Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzM2RjYjJlOC01ZTQwLTQwODYtOTEwMy02M2U4OGEzYjQyNGUiLCJpZCI6MjI5NjUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODI0NTYwMzF9.VG2_T9ry8EnBWAh4msJ3s6m2jW_5hgAZQvfEQDh-WQs"
            window.viewer = new window.Cesium.Viewer("init-viewer-wrapper", {
                terrainProvider: new window.Cesium.CesiumTerrainProvider({
                    url: 'http://data.mars3d.cn/terrain',
                    requestWaterMask: true,
                    requestVertexNormals: true
                }),
                sceneMode: window.Cesium.SceneMode.SCENE3D,
                vrButton: false,
                animation: false,
                baseLayerPicker: false,
                geocoder: false,
                timeline: false,
                fullscreenButton: false,
                homeButton: false,
                creditContainer: document.createElement('div'),
                infoBox: true,
                navigationHelpButton: false,
                sceneModePicker: false,
                scene3DOnly: true,
                skyBox: new window.Cesium.SkyBox({
                    sources: {
                        positiveX: require('@/assets/images/tycho2t3_80_px.jpg'),
                        negativeX: require('@/assets/images/tycho2t3_80_mx.jpg'),
                        positiveY: require('@/assets/images/tycho2t3_80_py.jpg'),
                        negativeY: require('@/assets/images/tycho2t3_80_my.jpg'),
                        positiveZ: require('@/assets/images/tycho2t3_80_pz.jpg'),
                        negativeZ: require('@/assets/images/tycho2t3_80_mz.jpg'),
                    }
                })
            });
            window.viewer.scene.globe.depthTestAgainstTerrain = true;

            let primitive = window.viewer.scene.primitives.add(Cesium.Model.fromGltf({
                url: "/model/glb/Cesium_Man.glb",
                modelMatrix: Cesium.Matrix4.fromTranslationQuaternionRotationScale(Cesium.Cartesian3.fromDegrees(117.66, 36.1, 330), Cesium.Quaternion.fromHeadingPitchRoll(Cesium.HeadingPitchRoll.fromDegrees(0, 20, -45)), new Cesium.Cartesian3(1, 1, 1)),
                minimumPixelSize: 200
            }));
            await primitive.readyPromise
            window.viewer.camera.flyToBoundingSphere(primitive._boundingSphere)

            depthOfField = window.viewer.scene.postProcessStages.add(
                Cesium.PostProcessStageLibrary.createDepthOfFieldStage()
            );
            depthOfField.enabled = true;
            //调节模糊效果
            depthOfField.uniforms.delta =1;
            depthOfField.uniforms.sigma = 3.78;
            depthOfField.uniforms.stepSize = 2.46;

        },
        updatePostProcessFocalDistance(value) {
            depthOfField.uniforms.focalDistance =value;
        },
        updatePostProcessStepSize(value){
            depthOfField.uniforms.stepSize =value;
        }
    }
}
</script>
  
<style>
#init-viewer-wrapper {
    width: 100%;
    height: 100%;
}

.slider-container {
    position: absolute;
    z-index: 10;
    width: 300px;
    margin-top: 100px;
    margin-left: 100px;
    color: white;
    background-color: rgba(12, 14, 11, 0.5);
    padding: 20px;
}
</style>
  